<template>
  <div id="login">
    <span style="font-size: 28px"><b>用户信息</b></span>
    <div class="inp">
      <label>
        <input
          type="text"
          placeholder="请输入用户名"
          required
          v-model.trim="username"
        />
        <span class="line"></span>
      </label>
      <label>
        <input
          type="password"
          placeholder="请输入密码"
          required
          v-model.trim="password"
        />
        <span class="line"></span>
      </label>
    </div>
    <div class="btn">
      <b-button pill variant="outline-success" @click="Login">登录</b-button>
      <b-button pill variant="outline-primary" @click="Register">注册</b-button>
    </div>
  </div>
</template>

<script>
import bus from "@/components/eventBus";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      userData: {},
    };
  },
  created() {},
  methods: {
    Register() {
      const username = this.username;
      const password = this.password;
      if (username === "" || password === "") {
        alert("用户名或密码不能为空");
      } else if (password.length < 6 || password.length > 12) {
        alert("密码应该在6~12位之间");
      } else {
        this.$axios
          .post("http://127.0.0.1/user/register", {
            use: username,
            pwd: password,
          })
          .then((res) => {
            const data = res.data;
            if (data.state == 0) {
              alert(data.msg);
              this.username = "";
            }
            if (data.state == 1) {
              alert(data.msg);
            }
          });
      }
    },
    Login() {
      const username = this.username;
      const password = this.password;
      if (username === "" || password === "") {
        alert("用户名或密码不能为空");
      } else if (password.length < 6 || password.length > 12) {
        alert("密码应该在6~12位之间");
      } else {
        this.$axios
          .get("http://127.0.0.1/user/login", {
            params: {
              use: username,
              pwd: password,
            },
          })
          .then((res) => {
            const data = res.data;
            if (data.state == 0) {
              alert(data.msg);
            }
            if (data.state == 1) {
              setTimeout(() => {
                bus.$emit("shareUser", data.data[0]);
              }, 0);
              alert(data.msg);
              window.sessionStorage.setItem("user", username);
              this.$router.push("/user/userinfo");
            }
          });
      }
    },
  },
};
</script>

<style scoped>
label {
  position: relative;
}
input {
  height: 36px;
  line-height: 36px;
  outline-style: none;
  font-size: 16px;
  color: #333;
  border: none;
  padding: 0 8px;
  box-sizing: border-box;
}
.line {
  width: 0;
  height: 2px;
  display: block;
  background-color: #4158d0;
  background-image: linear-gradient(
    90deg,
    #4158d0 0%,
    #c850c0 48%,
    #ffcc70 100%
  );
  transition: all 0.24s ease-in-out;
}
input:focus + .line,
input:valid + .line {
  width: 100%;
}
.btn {
  display: flex;
  justify-content: space-around;
}
</style>